<template>
  <div class="phone-validate">
    <div
      class="phone-validate__header h-50px flex justify-end items-center px-16px"
    >
      <svg class="h-14px w-14px fill-text-6" @click="$router.go(-1)">
        <use xlink:href="@/assets/symbol-defs.ef6a79c4.svg#icon_Close"></use>
      </svg>
    </div>
    <div class="phone-validate__body h-[calc(100vh-50px)] p-16px">
      <div class="phone-validate__title text-center">
        <img
          class="h-34px"
          alt="img"
          src=""
        />
        <div class="text-15px text-text-3 font-700 my-8px">
          {{ $t("title") }}
        </div>
        <div class="text-12px my-8px leading-18px">
          {{ $t("desc") }}
        </div>
      </div>
      <van-field
        :placeholder="$t('placeholder')"
        type="text"
        clearable
        autocomplete="off"
      />
      <div class="flex justify-center">
        <van-button
          block
          native-type="submit"
          class="text-text-3 bc-login-btn !w-[100%]"
        >
          {{ $t("verify") }}
        </van-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const $t = key => {
  return t("phone-validate." + key);
};
</script>

<style></style>
